<template>
  <div class="content">
    <div class="search-box">
      <svg
        t="1652162358357"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1924"
        width="16"
        height="16"
        @click="goToSearch"
      >
        <path
          d="M474.453333 884.053333c-225.28 0-409.6-184.32-409.6-409.6s184.32-409.6 409.6-409.6 409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6z m0-68.266666c187.733333 0 341.333333-153.6 341.333334-341.333334s-153.6-341.333333-341.333334-341.333333-341.333333 153.6-341.333333 341.333333 153.6 341.333333 341.333333 341.333334z m252.586667 54.613333c-13.653333-13.653333-10.24-37.546667 3.413333-47.786667s37.546667-10.24 47.786667 3.413334l64.853333 78.506666c13.653333 13.653333 10.24 37.546667-3.413333 47.786667s-37.546667 10.24-47.786667-3.413333l-64.853333-78.506667z"
          p-id="1925"
        ></path>
      </svg>
      <input type="text" name="" id="" @click="goToSearch" />
    </div>
    <div class="leftNav">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item title="热门推荐" />
        <van-sidebar-item title="热门推荐" />
        <van-sidebar-item title="OPPO" />
        <van-sidebar-item title="一加" />
        <van-sidebar-item title="realme" />
        <van-sidebar-item title="平板/电视" />
        <van-sidebar-item title="智能耳机" />
        <van-sidebar-item title="智能穿戴" />
        <van-sidebar-item title="智美生活" />
        <van-sidebar-item title="原装配件" />
        <van-sidebar-item title="数码周边" />
        <van-sidebar-item title="运动健康" />
        <van-sidebar-item title="生活日用" />
        <van-sidebar-item title="家用电器" />
        <van-sidebar-item title="文创潮玩" />
        <van-sidebar-item title="保障服务" />
      </van-sidebar>
    </div>
    <div class="rightPage">123456</div>
  </div>
</template>

<script>
import Home from "@/views/Home.vue";
import Vue from "vue";
import { Sidebar, SidebarItem } from "vant";

Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  components: {
    Home,
  },
  data() {
    return {
      activeKey: 1,
      hot: [],
      hot2: [],
    };
  },
  methods: {
    goToItem: function () {
      this.$router.push("/login");
    },
    goToSearch: function () {
      this.$router.push("/search2");
    },
    goBack: function () {
      this.$router.push("/home");
    },
  },
  created() {
    this.$axios
      .get(
        "/cn/oapi/goods-business/category/first/detail?code=000024&scene=mall&preview=false"
      )
      .then((res) => {
        console.log("res ==>", res);
        this.hot = res.data;
        this.hot2 = this.hot[0].title;
        console.log("热门推荐数据列表：", this.hot);
        console.log("热门推荐详细数据: ", this.hot2);
      });
  },
};
</script>

<style lang="scss">
.content {
  .search-box {
    border-bottom: 1px solid whitesmoke;
    position: fixed;
    width: 375px;
    z-index: 998;
    height: 46px;
    background: white;
    // margin: 0.2rem 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-pack: start;
    justify-content: flex-start;
    .icon {
      position: absolute;
      top: 0.4rem;
      left: 0.5rem;
      z-index: 999;
    }
    input {
      margin-top: 7px;
      text-indent: 0.75rem;
      width: 100%;
      outline: none;
      border: none;
      height: 33px;
      margin: 0.2rem 0.3rem;
      line-height: 0.66rem;
      background: #f7f8fa;
      border-radius: 0.09rem;
      opacity: 0.9;
    }
  }
  .leftNav {
    width: 90px;
    .van-sidebar-item {
      position: relative;
      display: block;
      box-sizing: border-box;
      padding: 20px 12px;
      overflow: hidden;
      color: #666666;
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
      background-color: white;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }
    .van-sidebar-item--select::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 4px;
      height: 16px;
      background-color: black;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      content: "";
    }
    .van-sidebar-item--select,
    .van-sidebar-item--select:active {
      background-color: #fff;
      color: black;
      font-weight: bold;
    }
  }
  .rightPage {
      width: 285px;
  }
}
</style>